<template>
<div class="container">
    <van-nav-bar
        title="预约订单"
        left-arrow
        @click-left="back()"
        right-text="帮助"
        class="navBar"
        :border="false"
    ></van-nav-bar>
    <nav class="menu">
        <ul>
            <li :class="id==1?'active':''" @click="tapMenu(1)">已预约</li>
            <li :class="id==2?'active':''" @click="tapMenu(2)">取消预约</li>
            <li :class="id==3?'active':''" @click="tapMenu(3)">服务完成</li>
        </ul>
    </nav>
    <nav class="submenu">
        <ul>
            <li :class="subId==0?'active':''" @click="tapSubMenu(0)">全部</li>
            <li :class="subId==1?'active':''" @click="tapSubMenu(1)">三电维保</li>
            <li :class="subId==2?'active':''" @click="tapSubMenu(2)">保养</li>
            <li :class="subId==3?'active':''" @click="tapSubMenu(3)">维修</li>
            <li :class="subId==4?'active':''" @click="tapSubMenu(4)">洗车</li>
        </ul>
    </nav>
    <Complete :list="filterState" @onSearch="query" :total="state.total" />
</div>
    
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import Complete from "./complete.vue";
import { reserve } from "api/order.js";

let state = reactive({
    list: [],
    limit: 10,
    page: 0,
    total: 0,
});

//查询预约订单(由子组件通过emit来调用)
const query = async () => {
    state.page++;
    let res = await reserve({ limit: state.limit, page: state.page });
    state.list = [].concat(res.data, state.list);
    state.total = res.count;
    // console.log(state.list)
};

onMounted(() => {
    query();
});

//对状态进行过滤
const filterState = computed(() => {
    let list = state.list.filter((item) => {
        if (subId.value > 0) {
            return (
                item.appointmentState == id.value &&
                item.appointmentType == subId.value
            );
        }
        return item.appointmentState == id.value;
    });
    state.total = list.length;
    return list;
});

//一级菜单
const id = ref(1);
const tapMenu = (menuId) => {
    console.log(id, menuId);
    id.value = menuId;
};
//二级菜单
const subId = ref(0);
const tapSubMenu = (menuId) => {
    subId.value = menuId;
};
//返回上一页
const router = useRouter();
const back = () => {
    router.back();
};
</script>
<style lang="scss" scoped>
.container{
    height: 100vh;
    background-color: #f1f5f8;
}
.navBar {
        background: #fff;
        border: none;
    }
.menu {
    background-color: #fff;
    ul {
        display: flex;
        height: 2.5rem;
        li {
            flex: 1;
            line-height: 3.125rem;
            font-size: .875rem;
            &.active {
                color: #000;
                position: relative;
                font-weight: 900;
                font-size: 1rem;
                &::after {
                    position: absolute;
                    content: "";
                    width: 1.25rem;
                    height: .25rem;
                    left: 50%;
                    margin-left: -0.625rem;
                    bottom: -2px;
                    background: #5e2f88;
                    background: #5e2f88;
                    border-radius: .25rem;
                }
            }
        }
    }
}
.submenu {
    background-color: #fff;
    ul {
        display: flex;
        height: 3.4375rem;
        justify-content: center;
        align-items: center;
        li {
            // flex: 1;
            margin-left: .625rem;
            width: 4.4375rem;
            height:1.5625rem;
            line-height: 1.5625rem;
            color: #8195A5;
            text-align: center;
            font-size: 0.875rem /* 14/16 */;
            background-color: #f1f5f8;
            border-radius: .3125rem;
            // font-weight: 900;
            &.active {
                color: white;
                background-color: #5e2f88;
                position: relative;
            }
        }
    }
}
</style>